<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超时商机审批列表</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./scss/index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div class="zl-timeout-review-business" id="zl-timeout-review-business">
        <div class="zl-timeout-review-business-main">
            <div class="zl-timeout-review-business-table">
                <el-table :data="tableData" style="width: 200%" height="100%" ref="multipleTable" @selection-change="selectionChange"
                    >
                    <!-- <el-table-column type="selection" width="55">
                    </el-table-column> -->
                    <template v-for="(item, index) in tableHeader">
                        <el-table-column :prop="item.key" :label="item.label" v-if="item.key !== 'op'" :key="index"
                            :width="item.width" :align="item.align || 'center'" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="item.slot">
                                    {{scope.row[item.key] ? scope.row[item.key] : '-'}}
                                </span>
                                <span v-else>{{scope.row[item.key]}}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageData.pageSize" layout="total, prev, pager, next, sizes" :total="pageData.total">
                </el-pagination>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#zl-timeout-review-business',
            data() {
                return {
                    dialogVisible: false,
                    tableHeader: [
                        { label: '状态', key: 'zt', width: '120', slot: true },
                        { label: '商机编号', key: 'sjbh', width: '100' },
                        { label: '商机名称', key: 'sjmc', width: '100' },
                        { label: '创建人', key: 'cjr', width: '180' },
                        { label: '客户名称', key: 'khmc', width: '150' },
                        { label: '等级', key: 'dj', width: '100' },
                        { label: '创建时间', key: 'createTime', width: '180' },
                        { label: '更新时间', key: 'updateTime', width: '180' },
                        { label: '商机状态', key: 'sjzt', width: '100', slot: true },
                        { label: '商机阶段', key: 'sjjd', width: '150' },
                        { label: '业务员', key: 'ywy', width: '100' },
                        { label: '集成商', key: 'jcs', width: '100' },
                        { label: '跨区', key: 'kq', width: '80' },
                        { label: '所跨区域', key: 'skqy', width: '80' },
                        { label: '商机金额(元)', key: 'sjje', width: '120' },
                        { label: '预计成交日期', key: 'yjcjrq', width: '180' },
                        { label: '备注', key: 'remark', width: '150' },
                        { label: '保护期', key: 'hhq', width: '100' }
                    ],
                    tableData: [
                        {
                            zt: '审批超时已通过', sjbh: '123456', sjmc: 'XXXX项目',
                            cjr: '山西利达纸业有限公司', khmc: '山东纸业有限公司', dj: 'T1', createTime: '2021-08-19 12:00:00', updateTime: '2021-08-19 12:00:00', sjzt: '注册', sjjd: '明确商机需求',
                            ywy: '业务1', jcs: '张三', kq: '是', skqy: '浙江', sjje: '2000.00', yjcjrq: '2021-08-19 12:00:00', remark: 'XXX项目跟进', hhq: '30天'
                        },
                        {
                            zt: '审批超时已通过', sjbh: '123456', sjmc: 'XXXX项目',
                            cjr: '山西利达纸业有限公司', khmc: '山东纸业有限公司', dj: 'T1', createTime: '2021-08-19 12:00:00', updateTime: '2021-08-19 12:00:00', sjzt: '注册', sjjd: '明确商机需求',
                            ywy: '业务1', jcs: '张三', kq: '是', skqy: '浙江', sjje: '2000.00', yjcjrq: '2021-08-19 12:00:00', remark: 'XXX项目跟进', hhq: '30天'
                        },
                        {
                            zt: '审批超时已通过', sjbh: '123456', sjmc: 'XXXX项目',
                            cjr: '山西利达纸业有限公司', khmc: '山东纸业有限公司', dj: 'T1', createTime: '2021-08-19 12:00:00', updateTime: '2021-08-19 12:00:00', sjzt: '注册', sjjd: '明确商机需求',
                            ywy: '业务1', jcs: '张三', kq: '是', skqy: '浙江', sjje: '2000.00', yjcjrq: '2021-08-19 12:00:00', remark: 'XXX项目跟进', hhq: '30天'
                        }
                    ],
                    pageData: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 0
                    },
                    selectList: [],
                    sshyList: [
                        { label: '电信', value: '1' },
                        { label: '金融', value: '2' },
                        { label: '制造', value: '3' },
                        { label: '政府', value: '4' },
                        { label: '能源', value: '5' },
                        { label: '交通', value: '6' },
                        { label: '教育', value: '7' },
                        { label: '其他', value: '8' },
                    ],
                    industryForm: {
                        sshy: '',
                        hymc: '',
                        hyms: '',
                    },
                    addType: 1,
                    title: '新增行业'
                }
            },
            methods: {
                selectionChange(selection) {
                    this.selectList = selection;
                },
                // 初始化数据
                initData() {

                },
                // 切换每页展示数量
                handleSizeChange(size) {
                    console.log(size)
                    this.initData()
                },
                // 切换页码
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.initData()
                }
            }
        })
    </script>
</body>

</html>